<template>
	<view class="container">
		<div class="search-top">
			<input class="seainput" @confirm="handlesbChange" placeholder="设备名称" v-model="deviceName"></input>
			<input class="seainput" @confirm="handlecdChange" placeholder="场地名称" v-model="venuesName"></input>
		</div>
		<div class="paixu">
			<div class="sort">
				<p style="font-size: 12px;">使用时间</p>
				<div class="jiantou">
					<u-icon @click="handleAsc" :color="order == 'asc' ? '#333333' : '#999999'" name="arrow-up-fill"></u-icon>
					<u-icon @click="handleDesc" :color="order == 'desc' ? '#333333' : '#999999'" name="arrow-down-fill"></u-icon>
				</div>
			</div>
			<div class="sort">
				<p style="font-size: 12px;">电压</p>
				<div class="jiantou">
					<u-icon @click="handleDianAsc" :color="dyorder == 'asc' ? '#333333' : '#999999'" name="arrow-up-fill"></u-icon>
					<u-icon @click="handleDianDesc" :color="dyorder == 'desc' ? '#333333' : '#999999'" name="arrow-down-fill"></u-icon>
				</div>
			</div>
		</div>
		<scroll-view scroll-y class="list" v-if="list.length != 0" @scrolltolower="loadMore">
			<view class="list-item" v-for="(item,index) in list" :key="item.order_sn">
				<view class="item-top">
					<p>电池编号：{{item.info_code}}</p>
				</view>
				<view class="item-bottom">
					<span>{{item.dianya}}v &nbsp;&nbsp;|&nbsp;&nbsp; {{item.dianliu}} &nbsp;&nbsp;| &nbsp;&nbsp;{{item.updatetime}}</span>
					<span>{{item.code}}&nbsp;&nbsp; |&nbsp;&nbsp; {{item.venue_name}}</span>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-else>
			<image src="/static/img/user/empty.png" mode=""></image>
			<p>暂无记录</p>
		</view>
	</view>
</template>

<script>
import { getDeviceList, getVenueCount, getDeviceItemList } from '../../../api/api.js'
export default {
	data() {
		return {
			list: [],
			deviceName: '',
			venuesName: '',
			devRange: [],
			venRange: [],
			total: '',
			current_page: 1,
			limit: 30,
			order: 'asc',
			dyorder: 'asc',
			last_page: 1
		}
	},
	onLoad() {
		this.getShebeiList();
		this.getChangdiList();
		this.getDeviceList();
	},
	methods: {
		getShebeiList() {
			getDeviceList({}).then(res => {
				this.devRange = res.data.map(item => {
					return {
						value: item.device_id,
						text: item.name
					}
				})
			})
		},
		handlesbChange() {
			this.current_page = 1;
			this.getDeviceList();
		},
		handleAsc() {
			this.order = 'asc';
			this.current_page = 1;
			this.getDeviceList();
		},
		handleDesc() {
			this.order = 'desc';
			this.current_page = 1;
			this.getDeviceList();
		},
		handleDianAsc() {
			this.dyorder = 'asc';
			this.current_page = 1;
			this.getDeviceList();
		},
		handleDianDesc() {
			this.dyorder = 'desc';
			this.current_page = 1;
			this.getDeviceList();
		},
		getChangdiList() {
			getVenueCount({}).then(res => {
				console.log(res, 'resseeeess');
				if(res.code === 1) {
					this.venRange = res.data.list.map(item => {
						return {
							value: item.id,
							text: item.venue_name
						}
					})
				}
			})
		},
		handlecdChange() {
			this.current_page = 1;
			this.getDeviceList();
		},
		loadMore() {
			if (this.current_page > this.last_page) {
				uni.showToast({
					icon: 'none',
					title: '没有更多记录了'
				})
				return
			}
			getDeviceItemList({
				limit: this.limit,
				page: this.current_page,
				device_name: this.deviceName,
				venues_name: this.venuesName,
				order: this.order
			}).then(res => {
				for (let i = 0; i < res.data.data.length; i++) {
					this.list.push(res.data.data[i])
				}
				this.total = res.data.total
				this.last_page = res.data.last_page
				this.current_page = res.data.current_page + 1
			})
		},
		getDeviceList() {
			getDeviceItemList({
				limit: this.limit,
				page: this.current_page,
				device_name: this.deviceName,
				venues_name: this.venuesName,
				order: this.order
			}).then(res => {
				this.list = res.data.data
				this.total = res.data.total
				this.last_page = res.data.last_page
				this.current_page = res.data.current_page + 1
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background: #F7F7F7;
	}
	.search-top{
		display: flex;
		padding: 0 5px;
		.seainput{
			background-color: #fff;
			padding: 10px;
			margin-right: 10px;
			border-radius: 8px;
			font-size: 12px;
		}
	}
	.paixu{
		padding: 10px;
		display: flex;
		.sort{
			display: flex;
			align-items: center;
			margin-right: 20px;
			.jiantou{
				margin-left: 10rpx;
				transform: scale(0.6);
			}
		}
	}
	::v-deep .u-icon {
		display: block !important;
	}
	.list {
		width: calc(100% - 60upx);
		padding: 0 30upx;
		height: calc(100% - 36upx);

		.list-item {
			width: 100%;
			padding: 10px;
			margin: 15px auto;
			background: #FFFFFF;
			box-shadow: 0px 2px 4px 0px rgba(41,121,255,0.05);
			border-radius: 8px;
			.item-top{
				p{
					font-weight: 500;
					font-size: 16px;
					color: #333333;
				}
			}
			.item-bottom{
				span{
					display: block;
					font-weight: 400;
					font-size: 12px;
					color: #666666;
					line-height: 30px;
				}
			}
		}
	}
	.empty {
		text-align: center;
		image{
			width: 207px;
			height: 171px;
			margin: 20px auto;
		}
		p{
			font-weight: 400;
			font-size: 14px;
			color: #A7A5A5;
		}
	}
	@media screen and (min-width:800px){
		.list{
			height:calc(100vh - 100upx)!important;
		}
	}
</style>
